<template>
  <div id="questions-index">
    <a href="//mp.weixin.qq.com/s/EGXZDl34P3LjfRhwoqsJpQ"> <img class="banner" :src=questionsIndexPageVo.questionsSettings.bannerUrl ></a>
    <img class="tit" src="../../../static/questions/img/bfjp.png">
    <ul class="box">
      <li><img :src=questionsIndexPageVo.questionsSettings.award1>
        <p>{{questionsIndexPageVo.questionsSettings.awardName1}}</p></li>
      <li><img :src=questionsIndexPageVo.questionsSettings.award2>
        <p>{{questionsIndexPageVo.questionsSettings.awardName2}}</p></li>
      <li><img :src=questionsIndexPageVo.questionsSettings.award3>
        <p>{{questionsIndexPageVo.questionsSettings.awardName3}}</p></li>
      <li><img :src=questionsIndexPageVo.questionsSettings.award4>
        <p>{{questionsIndexPageVo.questionsSettings.awardName4}}</p></li>
    </ul>
    <div class="btn" v-show="!isPreInfo">
      <div class="btn1" @click="showShareToast">分享活动</div>
      <div class="btn2" @click="goSchoolInfo">参与活动</div>
    </div>
    <div class="btn" v-show="isPreInfo">
      <div class="btn1" @click="showShareToast">分享活动</div>
      <div class="btn2">敬请期待</div>
    </div>
    <div style="width: 100%;height: 3.9rem;"></div>
    <div class="fx" v-show="showShareToastFlag" @click="hideShareToast">
      <img src="../../../static/questions/img/fxTiShi.png">
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { Indicator,Toast  } from 'mint-ui'
  import api from '../../api/http.js'
  import url from '../../api/urlConst.js'
  import { config } from '../../common/js/weChat/service.js'

  export default {
    components: {},
    data () {
      return {
        showShareToastFlag:false,
        isPreInfo:false,
        questionsIndexPageVo: {
          questionsSettings: {
            startTime1: '',
            startTime2: '',
            startTime3: '',
            endTime: '',
            bannerUrl: '',
            activityRule: '',
            award1: '',
            award2: '',
            award3: '',
            award4: '',
            awardName1: '',
            awardName2: '',
            awardName3: '',
            awardName4: '',

          },
          answerStatus: 0,
          weChatShareVo: {}
        },
        weChatShareVo: {}
      }
    },
    created () {
      this.getAnswerStatus()
      this.getPerInfoStatus()
      //this.getWeChatShareVo()
    },
    methods: {
      showShareToast () {
        this.showShareToastFlag = true
      },
      hideShareToast(){
        this.showShareToastFlag = false
      },
      goSchoolInfo(){
        this.$router.push('/question/schoolInfo')
      },
      getPerInfoStatus(){
        Indicator.open()
        api.post(url.questions.school.getPreInfoStatus).then((res) => {
          setTimeout(()=>{Indicator.close()},300)
          if (res.success) {
           this.isPreInfo = res.data
          }
        })
        setTimeout(()=>{Indicator.close()},300)
      },

      getAnswerStatus () {
        api.post(url.questions.answerStatus).then((res) => {
          if (res.success) {

            this.questionsIndexPageVo = res.data
            this.weChatShareVo = res.data.weChatShareVo
            /*if (this.questionsIndexPageVo.answerStatus === 0) {
              console.log('活动首页')
            } else if (this.questionsIndexPageVo.answerStatus === 1) {
              //this.$router.replace('/qrCode')
              console.log('活动1阶段')
            } else if (this.questionsIndexPageVo.answerStatus === 2) {

            } else if (this.questionsIndexPageVo.answerStatus === 3) {

            }*/
            setTimeout(() => {
              this._weChatConfig()
            }, 300)
          }
        })
      },
      getWeChatShareVo(){
        Indicator.open()
        api.post(url.questions.weChatShareVo).then((res) => {
          setTimeout(()=>{Indicator.close()},300)
          if (res.success) {
            this.weChatShareVo = res.data
            setTimeout(() => {
              this._weChatConfig()
            }, 300)
          }
        })
        setTimeout(()=>{Indicator.close()},300)
      },
      _weChatConfig () {
        let param = {
          pageUrl: location.href
        }
        api.get(url.weChat.getJsapiSignature, param).then((res) => {
          if (res.success) {
            let link = this.weChatShareVo.shareUrl + '?v=2'
            let imgUrl = this.weChatShareVo.shareImgUrl
            let title = this.weChatShareVo.shareTitle
            let desc = this.weChatShareVo.shareDesc
            config(res.data, link, imgUrl, title, desc)
          }

        })
      },
    }
  }
</script>

<style scoped>
  #questions-index{
    background-color: white;
  }

  .banner {
    display: block;
    width: 92%;
    height: 8rem;
    border-radius: 6px;
    margin: 0.6rem auto;
  }

  .tit {
    display: block;
    width: 92%;
    margin: 0.75rem auto;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
  }

  .box li {
    width: 44%;
    margin-left: 4%;
  }

  .box img {
    display: block;
    width: 100%;
    box-shadow: 0px 1px 6px 0px rgba(205, 205, 205, 0.5);
    border-radius: 2px;
  }

  .box p {
    text-align: center;
    font-size: 12px;
    line-height: 17px;
    padding: 0.4rem 0 1rem;
  }

  .btn {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    box-shadow: 0px 0px 3px 0px rgba(216, 216, 216, 0.5);
    background-color: #fff;
    padding: 0.5rem 0;
    display: flex
  }

  .btn1 {
    color: #4591FF;
    font-size: 18px;
    text-align: center;
    border: 1px solid #4591FF;
    width: 44%;
    height: 1.9rem;
    line-height: 1.9rem;
    margin-left: 4%;
    border-radius: 4px;
  }

  .btn2 {
    color: #fff;
    font-size: 18px;
    text-align: center;
    border: 1px solid #FF4587;
    background-color: #FF4587;
    display: block;
    width: 44%;
    height: 1.9rem;
    line-height: 1.9rem;
    margin-left: 4%;
    border-radius: 4px;
  }
  .btn3 {
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    background-color: #FF4587;
    width: 100%;
    height: 1.9rem;
    line-height: 1.9rem;
    margin-left: 4%;
    margin-right: 4%;
    margin-bottom: 4%;
    border-radius: 4px;
  }


</style>
